<template>
  <div class="mapbox">
    <div class="box" id="container"></div>
    <div class="inp1calss" v-show="flag">
      <input type="text" v-model="invalue1" @keyup.enter="abd(invalue1)" id="suggestId" />
      <button class="search" @click="abd(invalue1)">搜索</button>
    </div>
    <van-popup v-model:show="show">
      <div class="main">
        <p class="mapp1">{{ arrName.sname }}店</p>
        <div class="mapd1">
          <img :src="arrName.photo" alt="" />
          <div>
            <p>地址:{{ arrName.position }}</p>
            <p>状态:{{ arrName.status }}</p>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useCounterStore } from "../stores/counter";

const stores = useCounterStore();

const show = ref(false);

const invalue1 = ref("贵阳市云岩区喷水池");
const maplng = ref("");
const maplat = ref("");
const arr1 = [];

let arr = [];

const a = defineProps({
  scope1: {
    type: Number,
    default: 500,
  },
  invalue: {
    type: String,
  },
  flag: {
    type: Boolean,
    default: true,
  },
  adds: {
    default: [
      {
        sname: "服务到家",
        position: "贵州省贵阳市云岩区文昌北路",
        status: "营业",
        photo:
          "https://rps-resources.oss-cn-hangzhou.aliyuncs.com/images/store_photo1.jpg",
      },
      {
        sname: "上好家",
        position: "贵州省贵阳市云岩区紫林庵",
        status: "营业",
        photo:
          "https://rps-resources.oss-cn-hangzhou.aliyuncs.com/images/store_photo1.jpg",
      },
      {
        sname: "常常收",
        position: "贵州省贵阳市云岩区喷水池",
        status: "休息",
        photo:
          "https://rps-resources.oss-cn-hangzhou.aliyuncs.com/images/store_photo1.jpg",
      },
    ],
  },
});


let map = null;

const arrName = ref([]);

const initMap = function (lng, lat) {
  map = new BMapGL.Map("container");
  let Point = new BMapGL.Point(lng, lat);

  map.enableScrollWheelZoom(true);
  var myGeo = new BMapGL.Geocoder();
  // var adds = [
  //     "贵阳市云岩区师范大学",
  //     "贵阳市云岩区紫林庵",
  //     "贵阳市云岩区喷水池",
  // ];
  let index = 0;

  bdGEO();

  function bdGEO() {
    // if (a.adds.length !== 0) {
    //   return
    // }

    for (let i = 0; i < a.adds.length; i++) {
      var add = a.adds[index].position;
      geocodeSearch(add);
      index++;
      // console.log(111);
    }
  }
  function geocodeSearch(add) {
    setTimeout(window.bdGEO, 400);

    myGeo.getPoint(
      add,
      function (point) {
        if (point) {
          var address = new BMapGL.Point(point.lng, point.lat);
          addMarker(
            address,
            new BMapGL.Label(add, { offset: new BMapGL.Size(10, -10) }),
            add
          );
        }
      },
      "贵阳市"
    );
  }

  // 编写自定义函数,创建标注
  function addMarker(point, label, val) {
    var marker = new BMapGL.Marker(point);
    map.addOverlay(marker);
    marker.setLabel(label);
    var geocc = new BMapGL.Geocoder();

    marker.addEventListener("click", function (e) {
      const nums = a.adds.findIndex((item) => {
        return item.position === val;
      });

      if (nums !== -1) {
        arrName.value = a.adds[nums];
      }

      // if (a.adds.length===1) {
      //   return
      // }

      show.value = true;
    });
  }

  // var marker = new BMapGL.Marker(Point); // 创建标注
  // map.addOverlay(marker); // 将标注添加到地图中
  map.panTo(Point);
  map.centerAndZoom(Point, 14);

  map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
  map.addControl(scaleCtrl);
  var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
  map.addControl(zoomCtrl);

  // map.CopyrightControl(false)
};

onMounted(() => {
  initMap(106.7172, 26.59068);
  var geoc = new BMapGL.Geocoder();
  // 点击地图显示经纬度

  const aaa = document.querySelector("#suggestId").value;

  map.addEventListener("click", function (e) {
    // maplng.value = e.latlng.lng;
    // maplat.value = e.latlng.lat;

    // if (maplng.value != "" && maplat.value != "") {
    //     // map.clearOverlays();

    //     var new_point = new BMapGL.Point(maplng.value, maplat.value);
    //     // var marker = new BMapGL.Marker(new_point); // 创建标注
    //     // map.addOverlay(marker); // 将标注添加到地图中
    //     map.panTo(new_point);
    // }

    // map.clearOverlays();

    var pt = e.latlng;
    // var marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat));
    // map.addOverlay(marker);
    // console.log(pt);
    geoc.getLocation(pt, function (rs) {
      var addComp = rs.addressComponents;
      // console.log(rs.addressComponents);
      stores.inpVal =
        addComp.province +
        addComp.city +
        addComp.district +
        addComp.street +
        addComp.streetNumber;

      invalue1.value =
        addComp.province +
        addComp.city +
        addComp.district +
        addComp.street +
        addComp.streetNumber;
    });
  });
});

const draw = function (arr) {
  // console.log(arr, "-----------------------------");
  arr.forEach((item) => {
    const circle = new BMapGL.Circle(
      new BMapGL.Point(item.lng, item.lat),

      a.scope1,
      {
        strokeColor: "#5E87DB",
        strokeWeight: 2,
        strokeOpacity: 0.2,
        fillColor: "#5E87DB",
      }
    );

    map.addOverlay(circle);
  });
};

var cityGeo = new BMapGL.Geocoder();

const getLG = function (adress) {
  return new Promise((resolve, reject) => {
    cityGeo.getPoint(
      adress,
      function (point) {
        resolve(point);
      },
      "贵州省"
    );
  });
};

const abd = async (value) => {



  // if (typeof value !== "string") {
  //     console.log(111);
  //     value.forEach(async (item) => {
  //         var local = new BMapGL.LocalSearch(map, {
  //             renderOptions: { map: map },
  //         });

  //         var cityGeo = new BMapGL.Geocoder();
  //         const point = await getLG(item);
  //         initMap(point.lng, point.lat);

  //         const res = await fn(item);

  //         const obj = {};
  //         arr = arr.reduce((total, next) => {
  //             obj[next.key] ? "" : (obj[next.key] = true && total.push(next));
  //             return total;
  //         }, []);
  //         local.search(item);
  //     });
  // }

  // 搜索地点
  var local = new BMapGL.LocalSearch(map, {
    renderOptions: { map: map },
  });
  map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  var cityGeo = new BMapGL.Geocoder();
  const point = await getLG(value);
  initMap(point.lng, point.lat);

  const res = await fn(value);

  const obj = {};
  arr = arr.reduce((total, next) => {
    obj[next.key] ? "" : (obj[next.key] = true && total.push(next));
    return total;
  }, []);
  local.search(value);
};

const fn = function (value) {
  if (arr1.indexOf(value) === -1) {
    arr1.push(value);
  }
  return new Promise((resolve, reject) => {
    arr1.forEach(async (item) => {
      // cityGeo.getPoint(item, function (point) {}, item);
      let test = await getLG(item);

      arr.push(test);
      resolve(arr);

      draw(arr);
    });
  });
};

defineExpose({
  abd,
});
</script>

<style lang="less" scoped>
.mapbox {
  width: 100%;
  height: 100%;
}

.box {
  width: 100vw;
  height: 100%;
  margin: auto;
  position: relative;

  .main {
    width: 80%;
    height: 40%;

    .mapp1 {
      height: 8vw;
      width: 100%;
      line-height: 8vw;
      text-align: center;
      font-size: 20px;
      font-weight: 700;
    }

    .mapd1 {
      display: flex;
      padding: 2.667vw;

      img {
        width: 24vw;
        height: 24vw;
      }

      div {
        margin-left: 1.333vw;

        p {
          margin-bottom: 2.667vw;
        }
      }
    }
  }
}

.inp1calss {
  z-index: 999;
  position: absolute;
  top: 10%;
  left: 10%;

  input {
    width: 80vw;
    height: 30px;
    border-radius: 30px;
    background-color: rgba(139, 241, 248, 0.445);
    box-shadow: 0px 2px 10px rgb(51 51 51 / 35%);
    color: red;
    font-size: 14px;
    text-indent: 5vw;
  }

  .search {
    position: absolute;
    top: 0;
    right: 0;
    height: 30px;
    background-color: rgba(0, 255, 255, 0.327);
    border-radius: 0 15px 15px 0;
    border: none;
    font-size: 14px;
  }
}
</style>
